<template>
<view>
	<me-tabs v-model="tabIndex" :tabs="tabs" @change="tabChange" :height="100"></me-tabs>
	<mescroll-uni ref="mescrollRef" top="120" @init="mescrollInit" @up="upCallback" :down="downOption" :up="upOption" @emptyclick="emptyClick">
			<view class="lists" v-for="(item,index) in listdata" :key="index">
				<view class="listitem">
					<text class="type-title">{{item.body}}</text>
					<text class="get-cash">{{item.total_amount>0?'+'+item.total_amount:item.total_amount}} 元</text>
				</view>
				<view class="listitem">
					<text class="type-cash">{{item.add_time}}</text>
					<text class="type-cash">余额：{{item.balance}}元 </text>
				</view>
			</view>
	</mescroll-uni>
</view>
	
</template>

<script>
	/**
	 * 收支明细
	 */
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				showlimitbag: true,
				listdata: [],
				tabIndex: 0, // 当前菜单下标
				tabs: ['平台福利红包','个人现金红包'], 
				upOption: {
					// page: {
					// 	size: 10 // 每页数据的数量
					// },
					noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						tip: '~ 搜索无数据 ~', //提示
						btnText: ''
					},
					textLoading: "玩命加载中 ...",
					textNoMore: "-- 人家是有底线的 --",
				},
				downOption: {
					use: false
				}
			}
		},
		onLoad(option) {
			//查询个人充值数据
			if(option.type){
				this.tabIndex = 1
			}
		},
		methods: {
			upCallback(page) {
				//获取分类小BUG不能即使获取
				this.getinitdata(page.num, this.tabIndex+1).then(res => {
					// console.log(res);
					this.mescroll.endSuccess(res.length);
					//设置列表数据
					if (page.num == 1) this.listdata = []; //如果是第一页需手动制空列表
					this.listdata = this.listdata.concat(res); //追加新数据
				}).catch(error => {
					//联网失败, 结束加载
					this.mescroll.endErr()
					this.$ShowMsg('网络连接失败！')
				})
			},
			//点击空布局按钮的回调
			emptyClick() {
				uni.showToast({
					title: '点击了按钮,具体逻辑自行实现'
				})
			},

			//切换菜单
			tabChange(index) {
				this.tabIndex = index;
				this.listdata = [];
				this.mescroll.resetUpScroll();
			},
			//获取列表数据
			getinitdata(pages, type) {
				console.log(type)
				return new Promise((resolve, reject) => {
					this.$HttRequest({
						url: '/member/incomeList',
						param: {
							page: pages,
							type: type
						}
					}).then((res) => {
						if (res.status === 10000) {
							resolve(res.data.data);
						} else {
							this.$ShowMsg(res.message);
						}
					}).catch((error) => {
						//异常错误
						reject(error.errMsg);
					})
				})
			}
		}

	}
</script>

<style lang="scss">
	.lists {
		padding: 10rpx 35rpx;
		border-bottom-color: #F8F8F8;
		border-bottom-style: solid;
		border-bottom-width: 1rpx;
	}

	.listitem {
		margin: 6rpx 0;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.get-cash {
		color: #e9564f;
		font-size: 28rpx;
		font-weight: bold;
	}


	.type-title {
		color: #000;
		font-size: 28rpx;
	}

	.type-cash {
		color: #ababab;
		font-size: 25rpx;
	}
</style>
